<template>
  <div class="home-page">
    <!-- banner -->
    <div class="banner">
      <el-carousel
        height="930px"
        trigger="click"
        :autoplay="false"
        arrow="always"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.url">
          <img :src="item.url" class="image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 主业务 -->
    <div class="main-service">
      <h2>做数据，我们是专业的</h2>
      <div class="service-list">
        <div
          class="service-detail"
          v-for="item in mainService"
          :key="item.title"
        >
          <img :src="item.img" alt="logo" class="image" />
          <h4 class="title">{{ item.title }}</h4>
          <span class="text">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <!-- 解决方案 -->
    <solution />
  </div>
</template>
<script>
import { mainService, bannerList } from "./data";
import solution from "./components/solution.vue";
export default {
  name: "HomeIndex",
  components: { solution },
  setup() {
    return {
      bannerList,
      mainService,
    };
  },
};
</script>
<style scoped lang="scss">
@import "../../style/common.scss";
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -$nav_height;
}
.banner {
  height: 930px;
  width: 100%;
  .image {
    width: 100%;
    height: 100%;
  }
}
.main-service {
  width: 1400px;
  margin-top: 60px;
  h2 {
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .service-list {
    display: flex;
    justify-content: space-around;
    .service-detail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 16px;
      width: 280px;
      height: 340px;
      box-sizing: border-box;
      .image {
        width: 100%;
        height: 180px;
      }
      h4 {
        text-align: center;
      }
      .text {
        width: 100%;
        margin-top: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        text-indent: 2em;
      }
    }
  }
}
</style>
